<template>
    <div class="address address-create">
        <form id="form">
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label class="weui-label">联  系  人</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input v-model="form.contact_name" class="weui-input" type="text" required placeholder="请输入联系人真实姓名">
                    </div>
                </div>

                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label class="weui-label">手  机  号</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input v-model="form.contact_tel" class="weui-input" required type="number" placeholder="请输入手机号">
                    </div>
                </div>

                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label class="weui-label">所在地区</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input v-model="form.area" class="weui-input" type="text" required placeholder="请输入联系人所在地区">
                    </div>
                </div>

                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label class="weui-label">详细地址</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input v-model="form.address" class="weui-input" type="text"  required placeholder="请输入联系人详细地址">
                    </div>
                </div>
            </div>
        </form>

        <div class="bottom-bar">
            <a v-if="!id" @click="back" href="javascript: void(0)" class="bottom-bar-action bar-left">
                返回
            </a>

            <a v-if="id" @click="deleteAddress" href="javascript: void(0)" class="bottom-bar-action bar-left" style="background-color: #ff5722; color: #fff;" >
                删除
            </a>

            <div @click="onSubmit" class="bottom-bar-action">
                保存
            </div>
        </div>
    </div>
</template>

<script>
    export default { 
        data() {
            return {
                id: this.$route.params.id,
                select: this.$route.params.select === 'select',
                form: {
                    contact_name: '',
                    contact_tel: '',
                    area: '',
                    address: ''
                }
            }
        },
        created() {
            this.id && this.show();
        },
        methods: {
            onSubmit() {
                if (this.id) {
                    this.update()
                } else {
                    this.create()
                }
            },
            // 获取地址信息
            show() {
                var loading = weui.loading('加载中...');
                axios.get('/address/' + this.id).then(res => {
                     loading.hide();
                    if (res.data.status === 'success') {
                        this.form = res.data.data
                    }else {
                         weui.alert('地址信息异常');
                    }
                })
            },
            // 新建收货地址
            create() {
                let self = this;
                weui.form.validate('#form', function (error) {
                    if (!error) {
                        var loading = weui.loading('提交中...');

                        axios.post('/address', self.form).then(res => {
                            res = res.data
                            loading.hide();
                            if (res.status === 'success') {
                                weui.toast(res.message, 1000);
                                if(self.select) {
                                    self.$router.push({ name: 'address', params: { select: 'select' } })
                                }else {
                                    self.$router.push({ path: 'address' })
                                }
                                
                            }else {
                                weui.alert(res.message);
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                    // return true; // 当return true时，不会显示错误
                });
            },
            // 更新地址
            update() {
                let self = this;
                weui.form.validate('#form', function (error) {
                    if (!error) {
                        var loading = weui.loading('提交中...');
                        axios.post('/address/' + self.id + '/update', self.form).then(res => {
                            res = res.data
                            loading.hide();
                            if (res.status === 'success') {
                                weui.toast(res.message, 1000);
                                if(self.select) {
                                    self.$router.push({ name: 'address', params: { select: 'select' } })
                                }else {
                                    self.$router.push({ name: 'address' })
                                }
                            }else {
                                weui.alert(res.message);
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                    // return true; // 当return true时，不会显示错误
                });
            },
            deleteAddress() {
                var loading = weui.loading('加载中...');
                axios.post('/address/' + this.id + '/delete').then(res => {
                    loading.hide();
                    if (res.data.status === 'success') {
                         weui.toast(res.data.message, 1000);
                        if(self.select) {
                            self.$router.push({ name: 'address', params: { select: 'select' } })
                        }else {
                            self.$router.push({ path: 'address' })
                        }
                    }else {
                         weui.alert('地址信息异常');
                    }
                })
            },
            // 返回
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>